<template>
  <div v-for="item in otherCity" :key="item.prefix">
    <div class="item">{{ item.prefix.toUpperCase() }}</div>
    <ul>
      <li
        v-for="val in item.cities"
        :key="val.cityId"
        class="val"
        @click="chooseCity(val)"
      >
        {{ val.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";

export default {
  computed: mapGetters("city", ["otherCity"]),
  methods: {
    chooseCity(val) {
      // console.log(val);
      // this.$store.commit("changeName", val);

      this.changeName(val);
      // 因为vuex的内容刷新是会丢失的，需要在本地存储也存一份
      localStorage.setItem("name", val.name);
      localStorage.setItem("id", val.cityId);

      this.$router.go(-1);
    },
    ...mapMutations("city", ["changeName"]),
  },
};
</script>

<style lang="less" scoped>
.item {
  height: 30px;
  line-height: 30px;
  padding-left: 25px;
  font-size: @m-font;
  background-color: #ddd;
}

.ul {
  display: flex;
  flex-wrap: wrap;
}

.val {
  height: 45px;
  padding-left: 15px;
  border-bottom: 1px solid @border-color;
  line-height: 45px;
  font-size: @m-font;
}
</style>
